<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>MapServer Layer</title>
    <link rel="stylesheet" href="../OpenLayers/theme/default/style.css" type="text/css">
    <style>
		.opmap
		{
			height:500px;
			width:550px;
		}
		/* The map and the location bar */
		#map {
			clear: both;
			position: relative;
			width: 950;
			height: 500px;
			border: 1px solid black;
		}
		.mypopuphtml{
			 padding-left:5px;
			 padding-top:0px;
			 padding-bottom:0px;
			 padding-right:5px;
			 font-family:Arial;
			 font-size:8pt;
			 background-color:white;
		}

    </style>
     <script src="../OpenLayers/lib/OpenLayers.js"></script>

    <script defer="defer" type="text/javascript">

        var zoom = 10;
        var map;
		var infoControls;
		var highlightlayer;
		var aktLayer=-1;
		// pink tile avoidance
		OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
		// make OL compute scale according to WMS spec
		OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;

		OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

        function init(){

			format = 'image/png';

			var bounds = new OpenLayers.Bounds(
				 80.060150146796, 26.34874029520519,
                    88.2042617796755, 30.44852477101598
			);

			var options = {
				controls: [],
				maxExtent: bounds,
				maxResolution: 0.023609375,
				projection: "EPSG:4326",
				units: 'degrees'
			};

			map = new OpenLayers.Map('map', options);

			// setup tiled layer
			var dist = new OpenLayers.Layer.WMS(
				"NepalDistrict", "http://localhost:8080/geoserver/wms",
				{
					srs: 'EPSG:4326',
					width: '450',
					styles: '',
					height: '512',
					layers: 'wecs:district_wgs',
					format: format,
					tiled: 'true',
					tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom,
					isBaseLayer: true,
					visibility: true
				},
				{
					buffer: 0,
					displayOutsideMaxExtent: true
				}
			);

			var rivers = new OpenLayers.Layer.WMS(
				
				"Nepal Rivers", "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'wecs:river_wgs',
					format: format,
					
					
					isBaseLayer: false,
					visibility: true
				}
			);
			var climate = new OpenLayers.Layer.WMS(
				
				"Climate Station", "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'wecs:climate_station_wgs84',
					format: format,
					
					
					isBaseLayer: false,
					visibility: true
				}
			);
			var basin = new OpenLayers.Layer.WMS(
				
				"Basin", "http://localhost:8080/geoserver/wms",
				{
					transparent: 'TRUE',
					srs: 'EPSG:4326',
					layers: 'wecs:subbasin_wgs84',
					format: format,
					
					
					isBaseLayer: false,
					visibility: true
				}
			);

           /* var bdhq = new OpenLayers.Layer.WMS(
                "Bangladesh Dist HQ",
                "http://localhost:8088/geoserver/wms",
                {
                    transparent: 'TRUE',
                    srs: 'EPSG:4326',
					layers: 'bdadmin:dist_hq_geo',
					format: format,
					isBaseLayer: false,
					visibility: true
                }
            );*/
			var highlight_style = { fillColor:'#FF0000', strokeColor:'#FF0000', fillOpacity:0.7 };

			highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
				displayInLayerSwitcher: false,
				isBaseLayer: false,
				style:highlight_style
				}
			);

		   //map.addLayers([gphy, gmap, ghyb, gsat]);
           map.addLayers([dist,rivers,climate,basin,highlightLayer]);

			// build up all controls
			map.addControl(new OpenLayers.Control.PanZoomBar({
				position: new OpenLayers.Pixel(2, 15)
			}));

			map.addControl(new OpenLayers.Control.Navigation());
			map.addControl(new OpenLayers.Control.Scale($('scale')));
			map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
			//map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')}));
			map.zoomToExtent(bounds);
			map.updateSize();

			infoControls = {
            click: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [rivers,climate,basin],
                queryVisible: true,
				infoFormat:'application/vnd.ogc.gml',
				eventListeners: {
					getfeatureinfo: function(event) {
						map.addPopup(new OpenLayers.Popup.FramedCloud(
							"chicken",
							map.getLonLatFromPixel(event.xy),
							null,
							GenPopText(event),
							null,
							true
						));
                }}
           	}),
            hover: new OpenLayers.Control.WMSGetFeatureInfo({
                url: 'http://localhost:8080/geoserver/wms',
                title: 'Identify features by clicking',
                layers: [rivers,climate,basin],
                hover: true,
                // defining a custom format options here
                formatOptions: {
                    typeName: 'water_bodies',
                    featureNS: 'http://www.openplans.org/topp'
                },
                queryVisible: true,
				infoFormat:'text/html'
            	})

			};

			for (var i in infoControls) {
				infoControls[i].events.register("getfeatureinfo", this, showInfo);
				map.addControl(infoControls[i]);
			}

			infoControls.click.activate();
			//infoControls.hover.activate();

			// Active layer combo
			populateLayer(0);
        }

		// sets the HTML provided into the nodelist element
		function setHTML(response){
			document.getElementById('nodelist').innerHTML = response.responseText;
		};

		function errorHTML(response)
		{
			alert("req erro:" + response.responseText);
		}

    	function showInfo(evt) {
			if (evt.features && evt.features.length) {
				 highlightLayer.destroyFeatures();
				 highlightLayer.addFeatures(evt.features);
				 highlightLayer.redraw();

				 $('nodelist').innerHTML = GenPopText(evt);

			} else {
				$('nodelist').innerHTML = evt.text;
			}
        }

		function GenPopText(evt){
				 var temstr="<b><i>" + evt.features[0].gml.featureType + "</i></b><br/>";
				 for(var key in evt.features[0].attributes)
				 {
					temstr += "<b>" + key + "</b>:" + evt.features[0].attributes[key] + "<br/>";
				 }
				 return temstr
		}

    </script>
  </head>

  <body onLoad="init()">
    <div id="title">WECS</div>
    <div id="layerswitcher" class="olControlLayerSwitcher"></div>
    <div id="map"></div>

    <div id="wrapper">
        <div id="location" style="float:left">location</div>
        <div id="scale" style="float:left"></div>
        <div id="scale" style="clear:both"></div>
    </div>
    <div id="nodelist">
        <em>Click on the map to get feature info</em>
    </div>

  </body>
</html>
